<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>PNG图片圆角生成器</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                max-width: 800px;
                margin: 0 auto;
                padding: 20px;
                line-height: 1.6;
            }
            .container {
                display: flex;
                flex-direction: column;
                gap: 20px;
            }
            .controls {
                display: flex;
                flex-direction: column;
                gap: 15px;
                padding: 20px;
                background: #f5f5f5;
                border-radius: 8px;
            }
            .preview-container {
                display: flex;
                justify-content: center;
                gap: 20px;
                flex-wrap: wrap;
            }
            .preview-box {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            canvas {
                max-width: 100%;
                border: 1px solid #ddd;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }
            h1 {
                color: #333;
                text-align: center;
            }
            label {
                display: block;
                margin-bottom: 5px;
                font-weight: bold;
            }
            input[type='range'] {
                width: 100%;
            }
            .radius-value {
                text-align: center;
                font-size: 14px;
                color: #666;
            }
            button {
                padding: 10px 15px;
                background: #4caf50;
                color: white;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                font-size: 16px;
            }
            button:hover {
                background: #45a049;
            }
            .download-btn {
                background: #2196f3;
            }
            .download-btn:hover {
                background: #0b7dda;
            }
        </style>
    </head>
    <body>
        <h1>PNG图片圆角生成器</h1>

        <div class="container">
            <div class="controls">
                <div>
                    <label for="image-upload">选择PNG图片:</label>
                    <input type="file" id="image-upload" accept="image/png" />
                </div>

                <div>
                    <label for="radius-slider"
                        >圆角半径: <span id="radius-value">20</span>px</label
                    >
                    <input
                        type="range"
                        id="radius-slider"
                        min="0"
                        max="100"
                        value="20"
                    />
                </div>

                <div>
                    <button id="process-btn">生成圆角图片</button>
                    <button id="download-btn" class="download-btn" disabled>
                        下载图片
                    </button>
                </div>
            </div>

            <div class="preview-container">
                <div class="preview-box">
                    <h3>原始图片</h3>
                    <img id="original-preview" style="display: none" />
                </div>

                <div class="preview-box">
                    <h3>圆角图片</h3>
                    <canvas id="rounded-preview"></canvas>
                </div>
            </div>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const imageUpload = document.getElementById('image-upload')
                const radiusSlider = document.getElementById('radius-slider')
                const radiusValue = document.getElementById('radius-value')
                const processBtn = document.getElementById('process-btn')
                const downloadBtn = document.getElementById('download-btn')
                const originalPreview =
                    document.getElementById('original-preview')
                const roundedPreview =
                    document.getElementById('rounded-preview')
                const canvas = roundedPreview
                const ctx = canvas.getContext('2d')

                let currentImage = null
                let processedImageUrl = null

                // 更新圆角半径显示
                radiusSlider.addEventListener('input', function () {
                    radiusValue.textContent = this.value
                })

                // 图片上传处理
                imageUpload.addEventListener('change', function (e) {
                    if (e.target.files && e.target.files[0]) {
                        const reader = new FileReader()

                        reader.onload = function (event) {
                            originalPreview.src = event.target.result
                            originalPreview.style.display = 'block'
                            currentImage = new Image()
                            currentImage.src = event.target.result

                            currentImage.onload = function () {
                                // 重置下载按钮
                                downloadBtn.disabled = true
                                processedImageUrl = null
                            }
                        }

                        reader.readAsDataURL(e.target.files[0])
                    }
                })

                // 处理图片生成圆角
                processBtn.addEventListener('click', function () {
                    if (!currentImage) {
                        alert('请先上传图片')
                        return
                    }

                    const radius = parseInt(radiusSlider.value)
                    applyRoundedCorners(currentImage, radius)
                    downloadBtn.disabled = false
                })

                // 下载处理后的图片
                downloadBtn.addEventListener('click', function () {
                    if (processedImageUrl) {
                        const a = document.createElement('a')
                        a.href = processedImageUrl
                        a.download = 'rounded-image.png'
                        document.body.appendChild(a)
                        a.click()
                        document.body.removeChild(a)
                    }
                })

                // 应用圆角效果
                function applyRoundedCorners(image, radius) {
                    // 设置canvas尺寸与图片相同
                    canvas.width = image.naturalWidth
                    canvas.height = image.naturalHeight

                    // 清除画布
                    ctx.clearRect(0, 0, canvas.width, canvas.height)

                    // 绘制圆角矩形路径
                    ctx.beginPath()
                    roundRect(ctx, 0, 0, canvas.width, canvas.height, radius)
                    ctx.closePath()

                    // 剪切路径
                    ctx.clip()

                    // 绘制图片
                    ctx.drawImage(image, 0, 0, canvas.width, canvas.height)

                    // 保存处理后的图片URL
                    processedImageUrl = canvas.toDataURL('image/png')
                }

                // 绘制圆角矩形路径的函数
                function roundRect(ctx, x, y, width, height, radius) {
                    ctx.moveTo(x + radius, y)
                    ctx.lineTo(x + width - radius, y)
                    ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
                    ctx.lineTo(x + width, y + height - radius)
                    ctx.quadraticCurveTo(
                        x + width,
                        y + height,
                        x + width - radius,
                        y + height
                    )
                    ctx.lineTo(x + radius, y + height)
                    ctx.quadraticCurveTo(x, y + height, x, y + height - radius)
                    ctx.lineTo(x, y + radius)
                    ctx.quadraticCurveTo(x, y, x + radius, y)
                }
            })
        </script>
    </body>
</html>
